<template>
  <view class="page-wrapper page-space">
    <view v-for="x in data" :key="x.id" @click="to(x)" class="list-item">
      <image style="width: 80rpx; height: 80rpx; background-color: #eeeeee;" :src="getFileAccessAuthUrl(x.avatar, 's')" ></image>
      <view style="padding-left: 12rpx">
        <view>姓名：<text>{{ x.name }}</text></view>
        <view>性别：<text>{{ sex[x.sex] }}</text></view>
        <view>年龄：<text>{{ x.age }}</text></view>
        <view>身份证号码：<text>{{ x.idcard }}</text></view>
        <view>电话：<text>{{ x.phone }}</text></view>
        <view>QQ：<text>{{ x.qq }}</text></view>
      </view>
    </view>
    <lg-list-more :has-more="hasMore" :loading="loading" @load-more="loadMore"/>
  </view>
</template>

<script setup lang="ts">
import {useList} from '@/soar/hooks/page';
import LgListMore from "@/soar/components/lg-list-more/index.vue";
import api, {sex} from "@/demo/crud/api";
import {getFileAccessAuthUrl} from "@/soar/utils/file";
import {mustLogin} from "@/store/account";

mustLogin();

function to(row: any) {
  uni.navigateTo({ url: '/demo/crud/edit?id=' + row.id })
}

const { data, loadMore, onQuery, hasMore, loading, params } = useList<any>({
  params: {
    'acc|name-like': 'asdf',
    'age-ge': 18,
  },
  fields: ['assd', 'asdfasd'],
  api
})

</script>

<style lang="scss">
.page-wrapper {
  background: #f7f7f7;
  .list-item {
    background: #fff;
    padding: 24rpx;
    border-radius: 4px;
    display: flex;
    &+.list-item {
      margin-top: 24rpx;
    }
  }
}
</style>
